<template>
    <div class="w-screen">
        <div class="w-[90vw] m-[0_auto] min-h-20 
                rounded-xl overflow-hidden border-2 
                border-solid border-[#a6a6fc]
                bg-white relative mb-4"
                v-for="(item,index) in filteredItems" :key="index"
                
                >
            <div class="w-14 
                h-6 absolute 
                top-0 -right-1 
                text-xs leading-6 
                text-[#f9f1f1] 
                text-center bg-[#b0b0fc] 
                rounded-se-sm 
                rounded-es-xl" v-if="items.length == 1">
                示例
            </div>
            <!-- 原文 -->
            <div class="p-4 text-sm">
                <span class="font-[600]" style="
                    background-image: linear-gradient(to right,  blue, indigo, violet);
                    -webkit-background-clip: text;
                    color: transparent;
                    display: inline;
                    ">原文</span>
                <div class="py-2 text-[#696969]">
                    {{ item.content.split("——")[0].replace(/“|”/g, '') }}
                </div>
            </div>
            <!-- 分割线 -->
            <hr class="border-t border-dashed border-[#7ea4dd] mx-4 my-2">
            <!-- AI翻译 -->
            <div class="p-4 text-sm">
                <span class="font-[600]" style="
                    background-image: linear-gradient(to right, violet,indigo,blue);
                    -webkit-background-clip: text;
                    color: transparent;
                    display: inline;
                    ">AI翻译</span>
                <div class="py-2 text-xs text-[#696969]">
                    {{ item.content.split("——")[1].replace(/“|”/g, '') }}
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { AITranslateType } from "../types/aiDataType"
import {computed} from "vue"

const props = defineProps({
    items: {
        type: Array,
        default: () => []
    }
})

console.log(props.items);
// 过滤items数组，当items长度大于2时，忽略第一个元素
const filteredItems = computed(() => {
    if (props.items.length >= 2) {
        return props.items.slice(1); // 返回从第二个元素开始的数组
    }
    return props.items; // 否则返回原始数组
});


</script>

<style lang="scss" scoped></style>